import React from 'react';
import { observer } from 'mobx-react';
// import { SelectNew } from 'antd';
import { WeaSelectOptionProps } from '../../../stores/mobxTable/table';
import _ from 'lodash';
import {WeaSelect} from "ecCom";

interface Props {
    value?: string;
    editable?: boolean;
    options?: WeaSelectOptionProps[];
    column?;
    onChange?;
    row?;
}
@observer
export default class Main extends React.Component<Props,any>{
    getOptions=()=>{
        const {options} = this.props;
        let optionArr:any = [];
        options&&options.map(opt => {
            optionArr.push({
                key: opt.key,
                showname: opt.showname
            });
        });
        return optionArr;
    }
    render(){
        const props = this.props;
        const filered = props.options && props.options.filter(d => props.value ? d.key == props.value : d.selected);
        let value = props.value;
        let showname = '';
        let {column,row}=props;
        if(column.detailtype!=2){
            if (filered && filered.length > 0) {
                value = _.get(filered, '[0].key');
                showname = _.get(filered, '[0].showname');
            } else {
                value = '';
            }
        }
        let hide=column&&column.isHide&&column.isHide(row);
        const valueSpan = row.value[column.key+'Span']&&row.$(column.key+'Span').value;
        const valueDesc=column.valueDesc&&column.valueDesc(value,row);
        return (
            <div style={hide?{display:"none"}:{display:"block"}}>
            {props.editable ?
                <WeaSelect  
                    {...props}
                    detailtype={column.detailtype}
                    options={this.getOptions()}
                    value={value}
                    onChange={(key)=>{props.onChange&&props.onChange(key);column.onChange&&column.onChange(key,row);}}
                    style={column.width?{maxWidth:column.width,width:"100%"}:{width:"100%"}}
                    supportCancel
                />
                :
                <span>{valueDesc||valueSpan||showname}</span>}
            </div>
        )
    }
}
